<template>
  <view>
    <my-navbar
      @leftClick="navBack"
      :title="list.length == 0 ? '收藏' : `收藏(${list.length})`"
      @rightClick="changeCheck"
      :rightText="isCheck ? '' : '清空'"
      rightColor=""
      background=""
      leftText=""
    ></my-navbar>
    <view v-if="list.length">
      <view class="shop">
        <!-- <view class="shop_name">
          <u-checkbox
            v-model="flag"
            active-color="#40AE36"
            shape="circle"
            v-show="isCheck"
          ></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <text>菜东家生鲜 </text
          ><u-icon
            name="arrow-right"
            color="#999"
            size="14"
            style="margin-left: 10rpx"
          ></u-icon>
        </view> -->
        <view
          class="shop_item"
          v-for="(item, index) in list"
          :key="index"
          @click="goDetali(item.company_id, item.goods_id)"
        >
          <u-checkbox shape="circle" v-show="isCheck"></u-checkbox>
          <image :src="item.img"></image>
          <view class="shop_item_info">
            <view class="shop_item_info_name"> {{ item.name }} </view>
            <!-- <view class="shop_item_info_collect"> 收藏10人+ </view> -->

            <view v-if="item.status == 1">
              <view class="shop_item_info_price">
                ￥<text style="font-size: 36rpx">{{
                  item.spu[0].market_price
                }}</text>
                <text style="font-size: 36rpx" v-if="item.spu.length == 2"
                  >~{{ item.spu[1].market_price }}</text
                >
              </view>

              <view v-if="item.datum.length != 0" class="flex">
                <view
                  class="shop_item_info_datum"
                  v-for="(d, c) in item.datum"
                  :key="c"
                >
                  <text>{{ d.title }}</text>
                </view>
              </view>

              <!-- <view v-show="item.spu.length == 2">
                <view
                  class="shop_item_info_price"
                  v-for="(p, c) in item.spu"
                  :key="c"
                >
                  ￥<text style="font-size: 32rpx">{{ p.market_price }}</text>
                </view>
              </view> -->
            </view>
            <view class="shop_item_info_lose" v-if="item.status == 2">
              已失效
            </view>
            <div class="order-box-bottom">
              <!-- v-if="item.order_status == 2 || item.order_status == 3" -->
              <span
                class="again deg"
                @click.stop="addOrderReturn(item.company_id, item.goods_id)"
                >去店铺</span
              >
            </div>
          </view>
        </view>
        <!-- <view class="shop_item">
          <u-checkbox shape="circle" v-show="isCheck"></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <view class="shop_item_info">
            <view class="shop_item_info_name"> 江西赣南脐橙可吸果冻橙 </view>
            <view class="shop_item_info_collect"> 收藏10人+ </view>
            <view class="shop_item_info_price">
              ￥<text style="font-size: 32rpx">45</text>
            </view>
            <view class="shop_item_info_lose"> 已失效 </view>
          </view>
        </view> -->
      </view>
      <!-- <view class="shop">
        <view class="shop_name">
          <u-checkbox shape="circle" v-show="isCheck"></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <text>菜东家生鲜</text
          ><u-icon
            name="arrow-right"
            color="#999"
            size="14"
            style="margin-left: 10rpx"
          ></u-icon>
        </view>
        <view class="shop_item">
          <u-checkbox shape="circle" v-show="isCheck"></u-checkbox>
          <image src="../../static/images/img-bg.png"></image>
          <view class="shop_item_info">
            <view class="shop_item_info_name"> 江西赣南脐橙可吸果冻橙 </view>
            <view class="shop_item_info_collect"> 收藏10人+ </view>
            <view class="shop_item_info_price">
              ￥<text style="font-size: 32rpx">45</text>
            </view>
            <view class="shop_item_info_lose"> 已失效 </view>
          </view>
        </view>
      </view> -->
    </view>
    <view class="no_data" v-else>
      <view>
        <image :src="nodataImg" mode="aspectFit"></image>
        <text>抱歉，您还没有收藏商品哦</text>
      </view>
    </view>
    <view class="submitBar" v-show="isCheck">
      <u-checkbox shape="circle">全选</u-checkbox>
      <view class="submitBar_button">
        <view class="button" style="--color: #333333">加入购物车</view>
        <view class="button" style="--color: #f23434">删除</view>
      </view>
    </view>
  </view>
</template> 

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      nodataImg: getApp().globalData.nodataImg,
      isCheck: false,
      list: [1],
      flag: false,
      page: 1,
      company_id: 0,
    };
  },
  onShow() {
    this.getCollectList();
  },
  methods: {
    // 获取购物车列表
    getCollectList() {
      if (this.page == 1) {
        this.list = [];
        this.count = null;
      }
      let params = {
        page: this.page,
        size: 10,
      };
      $https("GET", "getCollection", params, (res) => {
        if (res.data.errcode == 0) {
          //   console.log(res);
          this.list = res.data.data.list;
        }
      });
    },
    // 返回
    navBack() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    // 管理清空
    changeCheck() {
      // this.isCheck = !this.isCheck;
      // this.list = "";
      // 清空收藏
      if(!this.list.length){
        uni.showToast({
          title:"您还没有收藏商品，无需清空",
          icon:"error"
        })
        return
      }
      $https("GET", "delCollect", {}, (res) => {
        if (res.data.errcode == 0) {
          uni.showToast({
            title: `清空收藏成功`,
            icon: "none",
          });
          this.getCollectList();
        } else {
          uni.showToast({
            title: `${res.data}`,
            icon: "none",
          });
        }
      });
    },

    // 去详情
    goDetali(id, goodId) {
      uni.navigateTo({
        url: `/pages/index/shopdetail?id=${goodId}&company_id=${id}`,
      });
    },

    // 去店铺
    addOrderReturn(id, goodId) {
      // console.log(p, c, "111");
      let info = this.$store.state.companyData.find(
        (item) => item.supplier_id == id
      );
      this.$store.commit("changeCompanyInfo", info);
      uni.switchTab({
        url: "/pages/shop/index",
      });
    },
  },
};
</script>

<style lang="scss">
/deep/.my_navbar {
  border-bottom: none;
}

/deep/.u-checkbox {
  width: 40rpx;
  margin-left: 20rpx;
}

.shop {
  width: 700rpx;

  border-radius: 10px;
  margin: 0 auto 20rpx;

  .shop_item_info_price {
    margin-top: 15rpx;
  }

  &_name {
    display: flex;
    height: 90rpx;
    line-height: 90rpx;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000;
    border-bottom: 1rpx solid #ebebeb;
    image {
      width: 25rpx;
      height: 25rpx;
      border-radius: 40rpx;
      margin: 0 20rpx;

      border: 1px solid #999999;
    }
  }

  &_item {
    display: flex;
    align-items: center;
    // height: 220rpx;
    margin: 20rpx 0;
    padding: 20rpx 0;
    box-sizing: border-box;
    background: #ffffff;
    position: relative;
    border-radius: 10rpx;

    image {
      width: 190rpx;
      height: 190rpx;
      margin: 0 30rpx;
    }

    &_info {
      height: 150rpx;

      // position: relative;

      .order-box-bottom {
        // display: flex;
        // flex-direction: row-reverse;
        // margin-top: -30rpx;
        // margin-right: -310rpx;
        position: absolute;
        right: 30rpx;
        bottom: 40rpx;

        span {
          display: inline;
          padding: 17rpx 24rpx;
          border: 1rpx solid #999999;
          border-radius: 45rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .deg {
          color: #d75131;
          border-color: #d75131;
        }
        .confirm {
          color: #40ae36;
          border-color: #40ae36;
        }
      }

      &_name {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      &_datum {
        margin-top: 20rpx;
        text {
          font-family: PingFang SC;
          font-weight: bold;
          background: red;
          border-radius: 6rpx;
          color: #fff;
          font-size: 16rpx;
          padding: 2rpx 6rpx;
          margin-right: 10rpx;

          // margin-right: 3rpx;
          // width: 44rpx;
          // height: 26rpx;
          // border: 1px solid #f55726;
          // border-radius: 4rpx;
          // color: #f55726;
        }
      }
      &_collect {
        font-size: 22rpx;
        font-family: PingFang SC;
        color: #999999;
        margin-top: 15rpx;
      }

      &_price {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #f55726;
        position: relative;
        top: 30rpx;
      }
      &_lose {
        width: 80rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #eeeeee;
        border-radius: 4px;
        text-align: center;
        font-size: 22rpx;
        font-family: PingFang SC;
        color: #999999;
      }
    }
  }
}
.no_data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 100rpx - var(--status-bar-height));
  view {
    display: flex;
    flex-direction: column;
    align-items: center;
    image {
      width: 420rpx;
      height: 260rpx;
    }
    text {
      margin-top: 85rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      color: #999999;
    }
  }
}
.submitBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  height: 100rpx;
  width: 100%;
  padding: 0 30rpx 0 60rpx;
  background: #ffffff;
  /deep/.u-checkbox {
    width: auto;
    margin-left: 0;
  }
  &_button {
    display: flex;
    .button {
      position: relative;
      width: 178rpx;
      height: 70rpx;
      line-height: 70rpx;
      border: 1rpx solid var(--color);
      color: var(--color);
      border-radius: 35rpx;
      text-align: center;
    }
    .button:nth-child(1) {
      margin-right: 20rpx;
    }
  }
}
</style>
